<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    用户名：<input type="text" id="username"><span></span><br>
    密码：<input type="text" id="password"><span></span><br>
    重复密码：<input type="text" id="password2"><span></span><br>
    邮箱：<input type="text" id="email"><span></span><br>
    手机号：<input type="text" id="tel"><span></span><br>
    <input type="button" id="btn" value="提交">
</body>
<script>
    // 用户名：必须字母开头，可以包含数字，字母，下划线，中划线，中文，2~8位
    // 密码：数字，字母，特殊字符，6~12位
        // 一种，弱；两种，中；三种，强
    // 重复密码：和密码相同，不需要正则
    // 邮箱：参考课上邮箱规则
    // 手机号：真实手机号规则

    // 提交：要求所有输入框都验证通过，点击提交提示成功，只要有一个输入框验证失败，就提示谁失败
    var un = document.getElementById("username");
    var pw = document.getElementById("password");
    var pw2 = document.getElementById("password2");
    var email = document.getElementById("email");
    var btn = document.getElementById("btn");
    var tel = document.getElementById("tel");

    var unFlag = pwFlag = pw2Flag = emailFlag = telFlag = false;

    un.oninput = function(){
        var str = this.value;
        var reg = /^[a-z][\w\-\u4e2d-\u9fff]{1,7}$/i;
        if(reg.test(str)){
            this.nextElementSibling.innerHTML = "ok";
            unFlag = true;
        }else{
            this.nextElementSibling.innerHTML = "不ok";
            unFlag = false;
        }
    }

    pw.oninput = function(){
        var str = this.value;

        // 判断密码长度是否符合，不符合，直接结束，不需要进行难度判断
        if(!(str.length >= 6 && str.length <= 12)){
            this.nextElementSibling.innerHTML = "长度不符";
            pwFlag = false
            return;
        }

        pwFlag = true;
        // 判断是否出现某一种字符，出现了就记录
        var a=0,b=0,c=0;
        var numReg = /\d/;
        if(numReg.test(str)){
            a=1;
        }
        var azReg = /[a-z]/i;
        if(azReg.test(str)){
            b=1;
        }
        var tsReg = /[^\da-z]/i;
        if(tsReg.test(str)){
            c=1;
        }
        // 根据出现了的种类，提示对应信息
        switch(a+b+c){
            case 1:this.nextElementSibling.innerHTML = "弱";
            break;
            case 2:this.nextElementSibling.innerHTML = "中";
            break;
            case 3:this.nextElementSibling.innerHTML = "强";
            break;
        }

        // 当重复密码不为空时，再验证密码和重复密码是否一致
        if(pw2.value === "") return;
        if(this.value === pw2.value){
            pw2.nextElementSibling.innerHTML = "密码一致";
            pw2Flag = true;
        }else{
            pw2.nextElementSibling.innerHTML = "密码不一致";
            pw2Flag = false;
        }
    }
    
    
    pw2.oninput = function(){
        // 验证重复密码和密码是否一致
        if(this.value === pw.value){
            this.nextElementSibling.innerHTML = "密码一致";
            pw2Flag = true;
        }else{
            this.nextElementSibling.innerHTML = "密码不一致";
            pw2Flag = false;
        }
    }


    email.oninput = function(){
        var str = this.value
        var reg = /^\w{1,10}@\w{2,10}\.[a-z]{2,6}$/;
        
        if(reg.test(str)){
            this.nextElementSibling.innerHTML = "ok";
            emailFlag = true
        }else{
            this.nextElementSibling.innerHTML = "不ok";
            emailFlag = false
        }
    }
    

    tel.oninput = function(){
        var str = this.value
        var reg = /^1[3-9]\d{9}$/;

        if(reg.test(str)){
            this.nextElementSibling.innerHTML = "ok";
            telFlag = true
        }else{
            this.nextElementSibling.innerHTML = "不ok";
            telFlag = false
        }
    }


    btn.onclick = function(){
        if(unFlag && pwFlag && pw2Flag && emailFlag && telFlag){
            alert("成功")
        }else{
            alert("失败");
            // 不仅要提示失败，还要提示谁失败了
        }
    }
    
</script>
</html>